<template>
	<view>
		<view class="address" @click="toShouhuodizhi">
			<view class="iconfont icon icon-left">
				&#xe60c;
			</view>
			<view class="address-detail">
				<view class="person">
					收货人：白羊 1555555555

				</view>
				<view class="">
					收货地址：河北省石家庄市长安桃园胜利北街柳辛庄北部时光14-4-4444

				</view>
				<view class="tishi">
					(收货地址不变时，可选择免费待收货服务)
				</view>
			</view>
			<view class="iconfont icon">
				&#xe640;
			</view>
		</view>
		<view class="jiesuan-bottom">
			<view class="dingdan-goods">
				<view class="goods-left">
					<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1-%E5%88%86%E7%B1%BB%E8%BF%9B%E5%85%A5/android/drawable-xhdpi/shouji.png"
					 mode="aspectFit" class="goods-left"></image>
				</view>
				<view class="goods-right">
					<view class="goods-right-top">
						<view class="goods-name twoLines">
							华为荣耀Note10 8GB+128GB 幻夜黑 全网通版智能手机
						</view>
						<view class="goods-right-top-r">
							<view class="">
								<label class="goods-newjifen">200</label> 积分
							</view>
							<view class="num">
								X1
							</view>
						</view>
					</view>


					<view class="goods-chicun">
						尺寸:6.39英寸 内存:8GB+128GB
					</view>
					<view class="goods-yanse">颜色:幻夜黑</view>
					<view class="goods-xijie">
						商城无忧购 7天无理由退货
					</view>
				</view>
			</view>
			<view class="peisong">
				<view class="">
					配送方式
				</view>
				<view class="">
					快递配送
					<label class="iconfont arrow">
						&#xe640;
					</label>
				</view>
			</view>
			<view class="beizhu-box">
				<view class="beizhu">
					订单备注
				</view>
				<textarea class="textare" value="" placeholder="选填：填写内容已和商家协商确认" />
			</view>
			
		</view>
		<view class="tijiao-fixed">
			<view class="">
				兑换积分<label class="iconfont right-icon">&#xe764;</label>
			</view>
			<view class="tijiao-jifen">
				<label class="num">1888 </label>积分
			</view>
			<view class="btn" @click="tijiaodingdan">
				<label class="iconfont tijiao-icon">&#xe6f2;</label>提交订单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},methods:{
			tijiaodingdan(){
				uni.showModal({
					title: '提示',
					content: '您是否确定要进行积分兑换？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res=> {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			toShouhuodizhi(){
				uni.navigateTo({
					url: './shouhuodizhi/shouhuodizhi',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	.address {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: rgb(255, 255, 255);
		color: rgba(22, 31, 33, 1);

	}

	.icon {
		margin: 0 30upx;

	}

	.icon-left {
		font-size: 20px;
	}

	.tishi {
		color: rgba(196, 156, 90, 1);
		line-height: 32px;
	}

	.person {
		 line-height: 28px; 
	}

	.dingdan-goods {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 20upx 10px 0;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		background: rgb(255,255,255);
	}

	.goods-left {
		height: 100px;
		width: 100px;

	}

	.goods-right {
		padding-left: 30upx;
		flex: 1;
	}

	.goods-right-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.goods-name {
		font-size: 15px;
		width: 303upx;
		font-weight: bold;
	}

	.goods-right-top-r {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.goods-right-top-r .num {
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
	}

	.goods-newjifen {
		font-weight: bold;
		line-height: 19px;
	}

	.goods-xijie {
		font-size: 12px;
		color: rgba(196, 156, 90, 1);
	}

	.goods-chicun,
	.goods-yanse {
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
	}

	.dingdan-pingjia {
		width: 50px;
		height: 25px;
		border: 1px solid rgba(196, 156, 90, 1);
		border-radius: 25px;
		text-align: center;
		line-height: 25px;
		color: rgba(196, 156, 90, 1);
	}
	.jiesuan-bottom{
		margin-top: 10px;
		background: rgb(255,255,255);
		padding-left: 30upx;
		font-size: 14px;
		min-height: 435px;
		margin-bottom: 58px;
		padding-bottom: 10px;
	}
	.jifen {
		font-size: 14px;
		font-weight: bold;
		margin: 0 3px;
	}
	.peisong{
		height: 49px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;	
		padding-right: 30upx;
		border-bottom:1px solid rgba(238, 238, 238, 1)
	}
	.beizhu{
		line-height: 40px;
	}
	.textare{
		width:630upx;
		height:70px;
		background:rgba(255,255,255,1);
		border:1px solid rgba(238,238,238,1);
		border-radius:5px;
		padding: 30upx;
	}
	.tijiao-fixed{
		position: fixed;
		bottom: 0;
		width:690upx;
		height: 49px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background:rgb(255,255,255);
		padding:0 30upx
		
	}
	.btn{
		width:120px;
		height:35px;
		background:linear-gradient(-90deg,rgba(196,156,90,1) 0%,rgba(226,196,138,1) 100%);
		border-radius:35px;
		color: rgb(255,255,255);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tijiao-icon{
		margin: 0 5px;
	}
	.right-icon{
		color:#CCCCCC;
		margin: 0 5px;
	}
	.tijiao-jifen{
		color: #FF5601;
		
	}
	.tijiao-jifen .num{
		font-size: 18px;
	}
</style>
